<template>
	<image 
		 @load="load"
		 :src="getImage" 
		 :mode="mode" 
		 :style="getImageStyle"
		 @click="viewImage" />

</template>

<script>
	import filter from '../../common/js/filter'
	import download from '../../common/js/file/download'
	import time from '../../common/js/tool/time'
	import localforage from 'localforage'
	export default {
		props: {
			src: {
				default: null
			},
			cacheSrc: {
				default: null
			},
			type: {
				default: ''
			},
			imageClass: {
				default: ''
			},
			size: {
				default: null
			},
			width: {
				default: null,
			},
			height: {
				default: null
			},
			srcList: {
				default: null
			},
			current: {
				default: 0,
			},
			isView: {
				default: false
			},
			styleData: {
				default: null
			},
			mode: {
				default: 'aspectFill'
			}
		},

		computed: {
			getImageStyle() {
				
				if (!this.size && !this.type)
					return
					
			    let width,height
				 
		
				if(this.type == 'avatar'){
					width = "40px"
					height = "40px"
				}
				
				width = this.width || this.size || width
				height = this.height || this.size || height
				
				 let  style = {
					
					...{
						width,
						height
					},
					
					...this.styleData
				}
				
				if(this.type == 'round' || this.type == 'avatar')
					style.borderRadius = "50%"
					

				return filter.compatibleStyles(style)

			},
			getSrcList() {
				return this.srcList === null ? [this.src] : this.srcList
			},
			getImage(){
				return this.imageSrc || this.src
			}
		},
		options: {
			styleIsolation: 'shared'
		},


		data() {
			return {
				imageStyle: {},
				imageHeight: 0,
				imageSrc: null,
				timer:null,

			}
		},
		created() {
			this.timer = setInterval(()=>{
				this.getSrc()
				if(this.imageSrc != null)
					clearInterval(this.timer)
			},1000)
	
		},

	
		beforeDestroy() {
			clearInterval(this.timer)
		},
		methods: {
			getSrc() {
				
				if (this.cacheSrc == null)
					return this.imageSrc = this.src
				 this.imageSrc = this.src || null

				try {
					
					localforage.getItem(this.cacheSrc).then((res) => {
						
						if (res == null) 
							this.downloadImage(this.src, this.cacheSrc)
						 else {
							//更新
							if(this.src !== res?.oldSrc)
								this.downloadImage(this.src, this.cacheSrc)
							else this.imageSrc = res?.data
	
						}
					}).catch((err) => {
						// 当出错时，此处代码运行
						this.downloadImage(this.src, this.cacheSrc)
						console.log(err);
					})

				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}
			},
			load(e) {
				// console.log(e)
				this.$emit('load', e)
			},
			//查看大图
			viewImage() {
				if (!(this.isView === true))
					return
				uni.previewImage({
					urls: this.getSrcList,
					current: this.current,
				})
			},


			async downloadImage(url, cacheName) {

				// url = filter.resolveCross(url)

				let res = await download.downloadFile(url)

				let result

				if (res.statusCode == 200) {
					let listName = cacheName.substring(0, cacheName.indexOf(':'))
					result = download.saveFile(res.tempFilePath, {
						name: cacheName,
						type: 'image',
						list: true,
						oldSrc: this.src,
						listName
					})
				}





			}
		}
	}
</script>

<style lang="less" scoped>
	.img {
		width: 100%;
	}
</style>